<template>
    <div id="wrap">
      <!--头部-->
      <div class="top">
        <img @click="goback()" src="../../../static/bmqd/BMQD-1.png" alt="">
        <input type="text" placeholder="输入商品关键字">
        <p>搜索</p>
      </div>

      <p class="title">亲们都在找</p>

      <div class="con" >
        <div class="goods-list" v-for="i in arr">
          <span v-for="item in i.arr1">{{item.tit}}</span>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        name: "Search",
      data(){
          return{
            arr:[
              {
                arr1:[
                  {tit:'面膜'},
                  {tit:'防晒'},
                  {tit:'眼霜'},
                  {tit:'精华'},
                ]
              },
              {
                arr1:[
                  {tit:'洗面奶'},
                  {tit:'资生堂'},
                  {tit:'洗发水'},
                  {tit:'防晒喷雾'},
                ]
              },
              {
                arr1:[
                  {tit:'洗面奶'},
                  {tit:'资生堂'},
                  {tit:'洗发水'},
                  {tit:'防晒喷雾'},
                ]
              }
            ]
          }
      },
      methods:{
        goback(){
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
  #wrap{
    height: 90rem;
  }
  .top{
    width: 69rem;
    height: 5rem;
    line-height: 5rem;
    padding: 2.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top input{
    width: 42rem;
    height: 3rem;
    border-radius: 1rem 1rem 1rem 1rem;
    font-size: 3.6rem;
    padding: 1rem 5rem;
  }
  input::placeholder{
    text-align: center;
    color: #e83d41;
  }
  .top img{
    width: 3rem;
    height:3rem;
    margin-top: 1rem;
  }
  .top p{
    font-size: 3.6rem;
    color: #fff;
  }

  .title{
    width: 70rem;
    height: 8rem;
    line-height: 8rem;
    /*background: #f2f2f2;*/
    font-size: 3rem;
    color: #4d4d4d;
    padding-left: 2rem;
  }



  .con{
    width: 68rem;
    height: 36rem;
    background: #fff;
    padding: 2rem;

  }
  .goods-list{
    width: 100%;
    height: 6rem;
  }
  .goods-list span{
    display: inline-block;
    margin-right: 2rem;
    font-size: 2.8rem;
    color: #4d4d4d;
    border: .1rem solid #ccc;
    border-radius: 1.8rem;
    width: 12rem;
    padding: .6rem 0;
    text-align: center;
  }
</style>
